<template>
    <Form :model="app" label-position="top" @submit.native.prevent id="basic_usage" ref="baseInfoForm" :rules="baseRule">
        <FormItem label="项目名" prop="appInfo.appName">
            <Input v-model="app.appInfo.appName" placeholder="my-awesome-project"></Input>
        </FormItem>
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="项目中文名称" prop="appInfo.appNameChs">
                    <Input v-model="app.appInfo.appNameChs" placeholder="项目名"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="项目包名" prop="appInfo.packages">
                    <Input v-model="app.appInfo.packages" placeholder="com.mdo.demo"></Input>
                </FormItem>
            </Col>
        </Row>
        <FormItem label="描述">
            <Input v-model="app.appInfo.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 3 }"
                   placeholder="项目描述（可选）"></Input>
        </FormItem>
    </Form>
</template>

<script>
    export default {
        data() {
            return {
                app: {
                    appInfo: {
                        appName: '',
                        packages: '',
                        components: '',
                        description: '',
                        appNameChs: '',
                        appType: '0'
                    }
                },
                baseRule: {
                    'appInfo.appName': [{
                        required: true, message: '项目名不能为空', trigger: 'blur'
                    }],
                    'appInfo.appNameChs': [{
                        required: true, message: '项目中文名称', trigger: 'blur'
                    }],
                    'appInfo.packages': [{
                        required: true, message: '项目包名不能为空', trigger: 'blur'
                    }]
                },
                withGitLab: false
            };
        },
        created() {
            this.$emit('changeApp', this.app);
        },
        methods: {
            getData() {
                return new Promise((resolve) => {
                    this.$refs['baseInfoForm'].validate(valid => {
                        if (valid) {
                            resolve(this.app);
                        }
                    });
                });
            }
        },
        watch:{
            app: {
                handler(val) {
                    this.$emit('changeApp', val);
                },
                deep: true
            }
        }
    };
</script>